<template>
	<view class="repairP" style="background-color: #F3F5F7;">
		<view>
			<u-navbar :is-back="true" :custom-back="goBack" title="设备报修" back-text="">
				<view class="slot-right" style="width: 100%; display: flex; justify-content: flex-end">
				</view>
			</u-navbar>
		</view>
		<view class="">
			<view class="">
				<view class="title">请选择设备类型</view>
				<view class="type">
					<text :class="typeBtn=='POWER_BANK'?'green':'white'" @click="typeCheck('POWER_BANK')">底座</text>
					<text :class="typeBtn=='CHARGER'?'green':'white'" @click="typeCheck('CHARGER')">充电线</text>
					<text :class="typeBtn=='PORTABLE_BATTERY'?'green':'white'" @click="typeCheck('PORTABLE_BATTERY')">充电宝</text>
				</view>
			</view>
			<view class="">
				<view class="title">
					请选择问题类型
				</view>
				<view class="type">
					<text :class="questionBtn=='CHARGE_PROBLEM'?'green':'white'" @click="questionCheck('CHARGE_PROBLEM')">无法充电</text>
					<text :class="questionBtn=='POP_UP_FAIL'?'green':'white'" @click="questionCheck('POP_UP_FAIL')">弹宝失败</text>
					<text :class="questionBtn=='RETURN_FAIL'?'green':'white'" @click="questionCheck('RETURN_FAIL')">归还失败</text>
					<text :class="questionBtn=='DEVICE_PROBLEM'?'green':'white'" @click="questionCheck('DEVICE_PROBLEM')">设备故障</text>
				</view>
			</view>
			<view class="">
				<view class="title">请输入问题描述</view>
				<view class="type">
					<textarea value="" v-model="content" placeholder="请描述遇到的问题" />
					</view>
			</view>
			<view class="type icon" style="position: relative;">
				<view class="title">
					设备编号
				</view>
				<input type="text" v-model="deviceSn" value="" placeholder="请输入设备编号" />
				<u-icon name="scan" style="position: absolute;bottom: 1.1rem;right: 1.2rem;" @click="scanSn"></u-icon>
			</view>
			<view class="type">
				<view class="title">
					手机号码
				</view>
				<input type="text" v-model="mobile" value="" placeholder="请输入您的手机号" />
			</view>
			
		    <view class="type">
				<view class="title">
					请上传图片(帮助我们快速解决您的问题)
				</view>
				<button @click="beforeUpload">124</button>
				<u-upload :header="header" @on-success="success9" ref="uUpload" action="https://e.yhhuoxing.com/apis/common/upload/image/complete" :before-upload="beforeUpload" max-count="3" @on-remove="remoceImg"></u-upload>
		    </view>
			
			<view class="">
				<view class="title">
					配送方式
				</view>
				<view class="" style="display: flex; align-items: center;margin-top: 10px;margin-left: 15px;">
					<view @click="sendBtn('THEIR_DISTRIBUTION')">
						<image v-if="sendStatus == 'THEIR_DISTRIBUTION'" src="../../style/image/cargo/gou.png" mode="" style="width: 15px;height: 15px;"></image>
						<image v-else src="../../style/image/cargo/kuang.png" mode="" style="width: 15px;height: 15px;"></image>
						<text style="margin: 0 15px 0 10px;">自己配送</text>
					</view>
					 <view @click="sendBtn('LOGISTICS_DISTRIBUTION')">
						 <image v-if="sendStatus == 'LOGISTICS_DISTRIBUTION'" src="../../style/image/cargo/gou.png" mode="" style="width: 15px;height: 15px;"></image>
						 <image v-else src="../../style/image/cargo/kuang.png" mode="" style="width: 15px;height: 15px;"></image>
						 <text style="margin-left: 10px;">物流配送</text>
					 </view>
				</view>
				<view class="type" style="margin-top: 10px;">
					<view v-if="sendStatus == 'LOGISTICS_DISTRIBUTION'" class="title">
						物流单号
					</view>
					 <input v-if="sendStatus == 'LOGISTICS_DISTRIBUTION'" type="text" v-model="logisticsNo" value="" placeholder="请输入物流单号" />
				</view>
				<view class="button">
					<u-button @click="sureBtn" type="success" style="border-radius: 0;">确认</u-button>
				</view>
		   </view>
		</view>
	</view>
	</view>
</template>

<script lang='js'>
	import {
		feedbackSave
	} from "../../utils/uniApi";
export default{
	data(){
		return{
			typeBtn:'',//设备类型（CHARGER -> 充电线； POWER_BANK -> 底座； PORTABLE_BATTERY -> 充电宝）
			questionBtn:'',//问题类型（CHARGE_PROBLEM -> 无法充电； POP_UP_FAIL -> 弹宝失败； RETURN_FAIL -> 归还失败； DEVICE_PROBLEM -> 设备故障）
			content:'',// 问题描述
			deviceSn:'',// 设备编号
			mobile:'',// 联系手机号
			imageUrls: ["https://kitty-prod.oss-cn-hangzhou.aliyuncs.com/kitty-prod_ccc608e5355a4db392ce86eb60d9d188.jpg"], //问题图片URL地址列表，最多3张list
			sendStatus:'',//配送方式 THEIR_DISTRIBUTION -> 自己配送； LOGISTICS_DISTRIBUTION -> 物流配送
			logisticsNo: "", //物流单号，物流配送必填
			header:{
				'token': uni.getStorageSync('token'),
				'appType': 'OPEN'
			},
		}
	},
	methods:{
		goBack() {
			uni.navigateBack({
				delta: 1
			});
		},
		typeCheck(value){
			this.typeBtn = value
		},
		questionCheck(value){
			this.questionBtn = value
		},
		success9(data){
			console.log(data,"")
			this.imageUrls.push(data.result)
		},
		//上传图片
		 beforeUpload(index,list) {	 
				// await等待一个请求，请求回来后再返回true，继续上传文件
							// let data = await this.$u.post('url');
							// var dic = JSON.parse(data)
							// that.imageUrls.push(dic.result)
							// return false; // 或者根据逻辑返回false
			// var that = this;
			// //return false
			// uni.chooseImage({
			//     count: 1,
			//     sizeType: ["compressed"],
			//     success(data) {
			// 		console.log(data,'+++66上传图片')
			// 		uni.uploadFile({
			// 			url: 'https://e.yhhuoxing.com/apis/common/upload/image/complete',
			// 			filePath: data.tempFilePaths[0],
			// 			name: "file",
			// 			formData: {
			// 				file: data.tempFiles,
			// 			},
						// header:{
						// 	'token': uni.getStorageSync('token'),
						// 	'appType': 'OPEN'
						// },
			// 			success: (uploadFileRes) => {
			// 				if(uploadFileRes.statusCode == 200){
			// 					var dic = JSON.parse(uploadFileRes.data)
			// 					that
			// 				}
			// 			},
			// 			fail: (err) => {
							
			// 			}
			// 		});
			//     },
			// });
		},
		//删除图片
		remoceImg(index){
			this.imageUrls.splice(index,1)
		},
		
		//二维码扫描设备编号
		scanSn(){
			var that = this;
			uni.scanCode({
				success: function(res) {
					this.deviceSn = res.result
				},
			});
		},
		//配送方式
		sendBtn(value){
			this.sendStatus = value
		},
		tipNote(value){
			uni.showToast({
				title: value,
				icon: 'none',
				duration: 1000
			});
		},
		//提交按钮
		sureBtn(){
			console.log('图片数组：'+this.imageUrls.length)
			console.log('图片：'+JSON.stringify(this.imageUrls))
			if(this.typeBtn == ''){
				this.tipNote('请选择设备类型')
				return
			}
			if(this.questionBtn == ''){
				this.tipNote('请选择问题类型')
				return
			}
			if(this.content == ''){
				this.tipNote('请填写问题描述')
				return
			}
			if(this.deviceSn == ''){
				this.tipNote('请填写设备编号')
				return
			}
			if(this.mobile == ''){
				this.tipNote('请填写手机号')
				return
			}
			if(this.imageUrls.length<=0){
				this.tipNote('请上传图片')
				return
			}
			if(this.sendStatus == ''){
				this.tipNote('请选择配送方式')
				return
			}
			if(this.sendStatus == 'LOGISTICS_DISTRIBUTION' && this.logisticsNo == ''){
				this.tipNote('请填写物流单号')
				return
			}
			uni.showLoading({
				title: "加载中",
			});
			let params = {
				deviceType: this.typeBtn, //设备类型 设备类型（CHARGER -> 充电线； POWER_BANK -> 底座； PORTABLE_BATTERY -> 充电宝）
				type: this.questionBtn, //问题类型（CHARGE_PROBLEM -> 无法充电； POP_UP_FAIL -> 弹宝失败； RETURN_FAIL -> 归还失败； DEVICE_PROBLEM -> 设备故障）
				content: this.content, // 问题描述
				deviceSn: this.deviceSn, // 设备编号
				mobile: this.mobile, // 联系手机号
				imageUrl: this.imageUrls, //问题图片URL地址列表，最多3张list
				sendStatus: this.sendStatus, //配送方式 THEIR_DISTRIBUTION -> 自己配送； LOGISTICS_DISTRIBUTION -> 物流配送
				logisticsNo: this.logisticsNo, //物流单号，物流配送必填
			};
			feedbackSave(params).then((res) => {
				console.log("输出参数值：" + JSON.stringify(res.data))
				uni.hideLoading();
				if (res.data.statusCode == 200) {
					this.tipNote('添加成功')
					var that = this
					setTimeout(() => {
						that.goBack()
					}, 1000)
				} else {
					var title = "添加失败"
					if (res.data.msg) {
						title = res.data.msg
					}
					this.tipNote(title)
				}
			});
		},
		
	}
}
</script>

<style lang="scss" scoped>
 
page{
 background-color: #F3F5F7;
 
 .type text,.type input,.type textarea,.type .u-upload{
  background-color: #fff;
  margin: 8px 15px;
  border-radius: 10rpx;
  padding: 10px;
 }
 .title{
   margin: 5px 15px;
  }
 .type{
  display: flex; 
  flex-wrap: wrap;
  justify-content: space-between;
  
  text{
  width: 41%;
  display: flex;
  align-items: center;
  padding: 10px 25px;
  justify-content: center;
  }
  textarea{
   padding: 10px 15px;
  }
  input{
   width: 100%;
   padding: 10px 15px;
  } 
 }
}
/deep/.u-list-item{
 background-color: #fff;
}
.green{
  background-color: #02AF74 !important;
  color: #fff;
 }
 .white{
  background-color: #fff;
  color: #000;
 }
</style>
